<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户登录</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
</head>
<body>
<h2 style="color:red">${requestScope.error}</h2>
<form action="${pageContext.request.contextPath}/login" method="post">
    <label for="username">名字：</label>
    <input id="username" type="text" name="name" placeholder="请输入用户名"><br/>

    <label for="password">密码：</label>
    <input id="password" type="password" name="password" placeholder="请输入密码"><br/>

    <label for="code">验证码：</label>
    <input id="code" type="text" name="code" placeholder="请输入验证码"><br/>

    <img src="${pageContext.request.contextPath}/captcha" alt="验证码" id="captcha"><br/>

    <input type="submit" value="登录">
</form>

<hr/>
<button class="btn btn-primary" onclick="sendAjax();">发送JSON数据</button>

<script>
    $(function () {
        var src = $("#captcha").attr("src");
        $("#captcha").click(function () {
            // 验证码地址后拼接参数作用：防止浏览器缓存图片
            $(this).attr("src", src+"?v=" + new Date().getTime());
        });
    });


    function sendAjax() {
        // 发送ajax请求
        var user = {username: "admin", password: "11111"};
        $.ajax({
            url: "http://localhost:8080/json/test6",
            contentType: "application/json",
            type: "post",
            data: JSON.stringify(user),
            success: function (result) {
                console.log(result);
                alert(result);
            }
        });
    }
</script>
</body>
</html>